<template>
  <view class="my-goods">
    <view class="goods-list-item" @click="$emit('click')" @touchstart='touchstart' @touchmove='touchmove' @touchend='touchend'>
      <radio :checked="goodsitem.goods_state" color="#C00000" v-if="showRadio" @click="onCheckdChange"></radio>
      <image class="goods-image" :src="goodsitem.goods_big_logo? goodsitem.goods_big_logo: defaultImg"></image>
      <view class="goods-info">
        <view class="goods-name">{{goodsitem.goods_name}}</view>
        <view class="goods-logistics">物流：包邮</view>
        <view class="goods-price" :class="{'goods-price-active': !showNub}">
          ￥{{goodsPrice(goodsitem.goods_price)}}
          <shop-number v-if="showNub" :modelValue="goodsitem.goods_count"  @change="numChangeHandler"></shop-number>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {reactive, ref} from 'vue'
  const emit = defineEmits(['checked-change','click', 'num-change'])
  const props = defineProps({
    goodsitem: {
      type: Object,
      default: () => ({})
    },
    showRadio: {
      type: Boolean,
      default: false
    },
    showNub: {
      type: Boolean,
      default: false
    },
    isTouchMove: {
      type: true,
      default: Boolean
    }
  })
  // 列表的默认图片
  const defaultImg = ref('https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png')
  // 商品价格格式化，保留两位小数
  const goodsPrice = (price) => {
    return Number(price).toFixed(2)
  }
  // 选框点击时间
  const onCheckdChange = () => {
    emit('checked-change', {
      goods_id: props.goodsitem.goods_id,
      goods_state: !props.goodsitem.goods_state
    })
  }
  const numChangeHandler = (val) =>{
    emit('num-change', {
      goods_id: props.goodsitem.goods_id,
      goods_count: +val
    })
  }
  
 

</script>

<style lang="scss">
  .my-goods {
    position: relative;
    display: flex;
  }
 .goods-list-item {
   display: flex;
   align-items: center;
   width: 100%;
   height: 100%;
   margin-bottom: 20rpx;
   border-bottom: 1rpx solid #f5f5f5;
   background-color: #fff;
   .goods-image {
     width: 250rpx;
     height: 250rpx;
   }
   .goods-info {
     flex: 1;
     display: flex;
     flex-direction: column;
     padding: 0 20rpx;
     .goods-name {
       overflow: hidden;
       word-break: break-all;
       text-overflow:ellipsis;
       display:-webkit-box; 
       -webkit-box-orient:vertical;
       -webkit-line-clamp:2; 
     }
     .goods-logistics {
       font-size: 30rpx;
       color: #999;
       margin: 15rpx 0;
     }
     .goods-price {
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-size: 35rpx;
       color: #c00000;
       padding-right:20rpx;
     }
     .goods-price-active {
       display: block;
     }
   }
  
 }
 
</style>